<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-03-28 18:47:56
 * @LastEditTime: 2022-04-19 16:00:28
 * @LastEditors: shizhe
 * @Reference: 计算内容长度是否超出盒子来进行是否显示tooltip
-->
<template>
  <div style="height: 100%" class="tool_node">
    <el-tooltip
      :disabled="disabledTooltip"
      effect="light"
      :content="value"
      placement="top"
      :popper-class="isSetWidth ? 'tool_tip' : ''"
    >
      <div v-if="!isBtn" style="height: 100%">
        <p :class="nodes" class="node text_hidde" v-if="oneLine">{{ value || '--' }}</p>
        <p :class="nodes" class="business" v-else>{{ value || '--' }}</p>
      </div>
      <p v-else :class="nodes">
        {{ text }}
        <span class="moreBtn" v-if="showBtn" @click="handleClick">(更多)</span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  props: {
    // 需要展示的内容
    value: {
      type: [String],
      required: true
    },
    // 是否是单行
    oneLine: {
      type: Boolean,
      required: true
    },
    // 是否显示更多按钮
    isBtn: {
      type: Boolean,
      default: false
    },
    isSetWidth: {
      type: Boolean,
      default: false
    },
    // 元素类名
    // 如若元素宽度不一样需要传不同的类名
    nodes: {
      type: String
    }
  },
  watch: {
    value() {
      if (this.isBtn) {
        this.text = ''
        this.computeText()
        return
      }
      this.regText()
    }
  },
  data() {
    return {
      text: '',
      disabledTooltip: true,
      showBtn: false
    }
  },
  mounted() {
    if (this.isBtn) {
      this.computeText()
      return
    }
    this.regText()
  },
  methods: {
    regText() {
      if (!this.value) {
        this.disabledTooltip = true
        return
      }
      let el = null
      let elHeight = null
      let maxWidth = null
      let elFont = null
      // 获取当前元素的宽度
      if (this.nodes) {
        el = document.querySelector('.' + this.nodes).clientWidth
        elHeight = document.querySelector('.' + this.nodes).clientHeight
        elFont = getComputedStyle(document.querySelector('.' + this.nodes)).fontSize.substr(0, 2)
      } else {
        el = document.querySelector('.node').clientWidth
        elHeight = document.querySelector('.node').clientHeight
      }
      // 匹配汉字的正则
      const reg = /[\u4e00-\u9fa5]/
      // 防止输入数字出现报错
      const arr = this.value.split('')
      let textWidth = 0
      arr.forEach(item => {
        // 文字宽度为16，其余为8
        if (reg.test(item)) {
          textWidth += elFont ? parseInt(elFont) : 16
        } else {
          textWidth += 8
        }
      })
      maxWidth = el
      // 如果文本的宽度大于input框的宽度，则显示tooltip
      if (!this.oneLine) {
        const height = Math.floor((elHeight < 16 ? 16 : elHeight) / (elFont < 16 ? 16 : elFont))
        maxWidth = el * (height - 1) + el
      }
      if (textWidth > maxWidth) {
        this.disabledTooltip = false
      } else {
        this.disabledTooltip = true
      }
    },
    computeText() {
      const el = document.querySelector('.' + this.nodes)
      // 获取元素的宽度
      const elWidth = el.clientWidth
      // 获取元素的高度
      const elHeight = el.clientHeight
      // 获取元素字体大小
      const elFont = getComputedStyle(el).fontSize.substr(0, 2)
      // 向下取整行数 高度不足14当14算
      const height = Math.floor((elHeight < 14 ? 14 : elHeight) / elFont)
      const lastRow = elWidth - 64
      const textwidth = elWidth * (height - 1) + lastRow
      // 匹配汉字的正则
      const reg = /[\u4e00-\u9fa5]/
      // 传过来的值转成单个的数组
      const arr = this.value.split('')
      let textWidth = 0
      arr.forEach(item => {
        // 文字宽度为字体大小，其余为字体大小的一半
        if (reg.test(item)) {
          textWidth += parseInt(elFont)
        } else {
          textWidth += elFont / 1.5
        }
        if (textWidth <= textwidth) {
          this.text += item
        }
      })
      this.disabledTooltip = true
      if (textWidth > textwidth) {
        this.showBtn = true
        if (!this.isBtn) {
          this.disabledTooltip = false
        }

        this.text = this.text.substr(0, this.text.length - 1) + '...'
      }
    },
    handleClick() {
      this.$emit('dialogOpen', this.value, this.nodes)
    }
  }
}
</script>
<style lang="less" scoped>
.business {
  // display: inline-block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tool_node {
  width: 100%;
  p {
    height: 100%;
  }
  .nodes {
    word-break: break-all;
  }
}
.moreBtn {
  cursor: pointer;
  margin-left: 16px;
  color: #fa7355;
}
</style>
